<template>
        <div class="app">
            <h4>父组件</h4>
            <div class="row">
                <Category title="热门游戏">
                  
                    <ul>
                        <li v-for="item in gams" :key="item.id">{{ item.grams }}</li>
                    </ul>
                   
                </Category>
                <Category title="今日美食推荐">
                   
                        <img :src="imgsURL" alt="" height="100px">
                   
                </Category>
                <Category title="今日影视推荐">
                    <!-- controls视频播放功能按键 -->
                        <video src="../../../asster/video/制片帮素材_1431185_八月十五中秋节海上升明月延时_小样.mp4" controls></video>
                </Category>
            </div>
            
        </div>
</template>
    
<script setup lang='ts'>
import { reactive, ref } from 'vue';
import Category from './Category.vue';

let gams = reactive([
    { id: '01', grams: '王者荣耀' },
    { id: '02', grams: '英雄联盟' },
    { id: '03', grams: '永结无间' },
    { id: '04', grams: '和平精英' },
])

let imgsURL = ref('https://img1.baidu.com/it/u=2270296300,1142901820&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067')

// let videoURL = ref('../../asster/video/制片帮素材_1431185_八月十五中秋节海上升明月延时_小样.mp4')
</script>
    
<style scoped>
    .app{
        background-color: #ccc;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px;
        .row{
            display: flex;
            justify-content: space-evenly;
        }
        img,video{
            width: 100%;
            object-fit: cover;
        }
    }
</style>